import React from 'react';
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { observer } from "mobx-react";
import { Wallet_Store_Key } from "@/models/wallet";
import { norInject, INorInjectProps } from "@/models";
import i18n from 'i18n-js';
import PageContainer from "@/components/PageContainer";
import {
  GStyleSheet,
  DynamicColors,
} from '@/utils/DarkMode';

const dstyles = GStyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    flexDirection: 'column',
    backgroundColor: DynamicColors.normalBackgroundColor,
    // paddingLeft: 15,
  },
  desItem: {
    borderBottomWidth: 1,
    borderBottomColor: DynamicColors.borderBottomColor,
    paddingRight: 15,
    paddingLeft: 15,
    marginTop: 15,
    display: 'flex',
    flexDirection: 'column',
  },
  desTitle: {
    fontSize: 16,
    marginBottom: 10,
    color: DynamicColors.normalTextColor,
  },
  desContent: {
    fontSize: 12,
    marginBottom: 15,
    color: DynamicColors.subTitleTextColor,
    // lineHeight: 16,
  }
});

interface IProps extends INorInjectProps {

}

@norInject(Wallet_Store_Key)
@observer
export default class WalletDescription extends React.Component<IProps> {

  goChargeAgreement = () => {
    Taro.navigateTo({ url: "/pages/wallet/ChargeAgreement" });
  }

  render() {
    const styles = dstyles.style;
    const { wallet: { price } } = this.props;
    const GIZ_COIN = i18n.t('GIZ_COIN');
    return (
      <PageContainer
        style={styles.container}
        title={i18n.t('DESCRIPTION')}
      >
        <View style={styles.container}>
          {
            new Array(6).fill(0).map((item, index) => {
              const i = index + 1;
              let content = i18n.t(`WALLET_DESCRIPTION_CONTENT_${i}`);
              if (i === 2) {
                content = i18n.t(`WALLET_DESCRIPTION_CONTENT_${i}`, { message: price[1] || 1, phone: price[2] || 3, name: GIZ_COIN });
              }
              return (
                <View style={styles.desItem}>
                  <Text style={styles.desTitle}>
                    {`${i}.`}
                    {i18n.t(`WALLET_DESCRIPTION_TITLE_${i}`)}
                  </Text>
                  <Text style={styles.desContent} onClick={this.goChargeAgreement} >
                    {content}
                    {i === 3 && <Text style={{ ...styles.desContent, color: 'rgb(89, 130, 198)' }}>{i18n.t('CHARGE_AGREEMENT')}</Text>}
                  </Text>

                </View>
              );
            })
          }
        </View>
      </PageContainer>
    );
  }
}
